<template>
  <div class="assignment-area">
    <!-- 作业栏标题 -->
    <h2 class="title">作业栏</h2>
    <div class="workarea">
      <!-- 左侧作业上传表单 -->
      <div class="left-part">
        <div class="assignment-form">
          <h2>作业上传</h2>
          <form @submit.prevent="submitAssignment">
            <div class="form-group">
              <!-- 输入作业名称 -->
              <label for="assignmentName">作业名称：</label>
              <input type="text" v-model="assignment.title" id="assignmentName" placeholder="输入作业名称" />
            </div>
            <div class="form-group">
              <!-- 输入作业内容 -->
              <label for="assignmentContent">作业内容：</label>
              <textarea v-model="assignment.text" id="assignmentContent" placeholder="输入作业内容"></textarea>
            </div>
            <div class="form-group">
              <!-- 日期时间选择器，用于设置作业截止日期 -->
              <label for="dueDate">截止时间：</label>
              <el-date-picker
                v-model="assignment.deadLine"
                type="datetime"
                placeholder="选择截止时间"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                :picker-options="datePickerOptions"
                style="width: 100%;"
              />
            </div>
            <div class="form-group">
              <!-- 上传文件 -->
              <label for="assignmentFile">上传文件：</label>
              <input type="file" @change="handleFileUpload" id="assignmentFile" />
            </div>
            <button type="submit">发布作业</button>
          </form>
        </div>
      </div>

      <!-- 右侧作业列表表格 -->
      <div class="right-part">
        <div class="assignment-table">
          <el-table :data="tableData" stripe>
            <!-- 表格列：作业ID -->
            <el-table-column label="作业Id" prop="id" />
            <!-- 表格列：作业名称 -->
            <el-table-column label="作业名称" prop="name" />
            <!-- 表格列：截止日期 -->
            <el-table-column label="截止日期" prop="deadline" />
            <!-- 表格列：操作 -->
            <el-table-column label="操作">
              <template #default="scope">
                <el-button type="primary" @click="goToHomeworkDetail(scope.row.id)">管理</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import { ElMessage } from 'element-ui';

// 设置axios的基础URL
axios.defaults.baseURL = "http://localhost:8085";

export default {
  data() {
    return {
      // 作业相关信息
      assignment: {
        courseId: this.$route.params.courseId, // 从路由参数获取课程ID
        title: '', // 作业标题
        text: '', // 作业内容
        deadLine: null, // 作业截止时间，初始值为null
        file: null, // 上传的文件
      },
      // 表格显示的作业数据
      tableData: [],
      // 日期选择器的配置项
      datePickerOptions: {
        disabledDate(time) {
          // 禁用今天之前的日期
          return time.getTime() < Date.now();
        },
      },
    };
  },
  mounted() {
    // 初始化时检查课程ID并加载作业数据
    if (!this.assignment.courseId) {
      ElMessage.error('课程ID无效，无法加载作业数据');
      return;
    }
    this.fetchHomeworkData();
  },
  methods: {
    // 跳转到作业详情页
    goToHomeworkDetail(homeworkId) {
      this.$router.push({ name: 'HomeworkDetail', params: { homeworkId } });
    },
    // 获取作业数据列表
    async fetchHomeworkData() {
  try {
    const courseId = parseInt(this.assignment.courseId); // 解析课程ID
    if (isNaN(courseId)) throw new Error('课程ID无效');
    const response = await axios.get('/homework/viewhomeworkitem', {
      params: { courseId }, // 发送课程ID作为参数
    });

    // 映射响应数据到表格数据格式
    this.tableData = response.data.map(item => ({
      id: item.homeworkId,   // 使用返回数据中的作业ID
      name: item.title,      // 使用返回数据中的作业名称
      deadline: item.deadLine // 使用返回数据中的截止日期
    }));
  } catch (error) {
    console.error('Error fetching homework data:', error); // 打印错误日志
    const errorMessage =
      error?.response?.data?.message || // 后端返回的错误信息
      error?.message ||                // axios 自身的错误消息
      '获取作业数据失败';             // 默认错误信息

    ElMessage.error(errorMessage); // 显示错误提示
  }
},

    // 处理文件上传事件
    handleFileUpload(event) {
      this.assignment.file = event.target.files[0]; // 保存选中的文件
    },
    // 提交作业信息
    async submitAssignment() {
  try {
    const formData = new FormData();
    formData.append('file', this.assignment.file); // 上传文件
    formData.append('title', this.assignment.title); // 作业标题
    formData.append('text', this.assignment.text); // 作业内容
    formData.append('courseId', parseInt(this.assignment.courseId)); // 课程ID
    formData.append('deadLine', this.assignment.deadLine); // 截止日期

    const response = await axios.post('/homework/publishhomework', formData, {
      headers: {
        'Content-Type': 'multipart/form-data',
      },
    });

    if (response.status === 200) {
      ElMessage.success('作业上传成功！'); // 显示上传成功消息
      await this.fetchHomeworkData(); // 重新加载作业列表
    } else {
      ElMessage.error('作业上传失败，请稍后再试。'); // 显示上传失败消息
    }
  } catch (error) {
    console.error('Error submitting assignment:', error); // 打印错误日志

    // 健壮性错误处理，确保访问未定义属性不会出错
    const errorMessage =
      error?.response?.data?.message || // 后端返回的错误信息
      error?.message ||                // axios 自身的错误消息
      '上传出错';                     // 默认错误信息

    ElMessage.error(errorMessage); // 显示错误提示消息
  }
}

  },
};
</script>

<style scoped>
.assignment-area {
  width: 90%;
  margin: 0 auto;
  text-align: center;
}
.workarea {
  display: flex;
}
.left-part {
  width: 30%;
}
.right-part {
  width: 70%;
  padding: 50px;
}

.title {
  font-size: 50px;
  font-weight: bold;
  margin-bottom: 20px;
}

.assignment-form {
  max-width: 400px;
  margin-left: auto;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #f9f9f9;
}

.form-group {
  margin-bottom: 15px;
}

label {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
}

input[type='text'],
input[type='file'],
textarea {
  width: 90%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}

.assignment-table {
  width: 100%;
  border-collapse: collapse;
  margin-right: auto;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #f9f9f9;
}
</style>
